<template>
	<u-popup v-model="getShows" mode="bottom" :closeable="true">
		<view class="carsListPopup">
			<view class="popupTitle">选择发货车辆</view>
			<view class="subTitle">请选择</view>

			<scroll-view class="content" scroll-y="true" style="max-height: 300px;">
				<view class="item" v-for="(item,index) in list" :key="index" @click="handleCarsItem(index)">
					<view class="icon">
						<u-icon name="https://supply.zhongyimotor.com/upload/applet/pic_car_supplier@2x.png"
							size="32"></u-icon>
					</view>
					<view class="info">
						<view class="title">车架号 {{item.vin}}</view>
						<view class="summary">{{item.status}}</view>
					</view>
					<view class="checked" v-if="item.checked">
						<u-icon name="checkbox-mark" color="#0FBD7F" size="32"></u-icon>
					</view>
				</view>
			</scroll-view>

			<view class="u-flex u-margin-top-30 u-margin-bottom-24">
				<u-button class="u-flex-1 u-margin-right-10" shape="circle" @click="getShows = false">取消</u-button>
				<u-button type="success" :custom-style="{
				'background':'#0FBD7F',
				'color':'#fff'
			}" class="u-flex-1" shape="circle" @click="handleSubmit">确定</u-button>
			</view>
			<u-toast ref="uToast" />
		</view>
	</u-popup>
</template>

<script>
	export default {
		props: {
			value: {
				type: Boolean,
				default: true
			},
			cars: {
				type: Array,
				default: () => []
			},
			checks: {
				type: Array,
				default: () => []
			},
		},
		computed: {
			getShows: {
				get() {
					if (this.value) {
						const cars = JSON.parse(JSON.stringify(this.cars))
						const list = cars.map(x => {
							if (this.checks.indexOf(x.vin)!==-1 ) {
								x.checked = true
							}
							return x
						})
						this.list = list
					}
					return this.value
				},
				set(val) {
					if (!val) {
						this.list = []
						this.$emit('input', false)
					}
				}
			}
		},
		data() {
			return {
				list: []
			};
		},
		mounted() {
			// console.log(this.getOrderId);

		},
		methods: {
			handleCarsItem(index) {
				const item = JSON.parse(JSON.stringify(this.list[index]))
				if (item.checked) {
					this.$set(this.list[index], 'checked', false)
				} else {
					this.$set(this.list[index], 'checked', true)
				}
			},
			handleSubmit() {
				const list = this.list.filter(x => x.checked)
				if (list.length <= 0) {
					this.$toast('请选择车辆', this)
					return
				}
				this.$emit('submit', list)
				this.getShows = false
			}
		}
	}
</script>

<style lang="scss">
	.carsListPopup {
		padding: 40rpx;
	}

	.subTitle {
		font-size: 26rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #949494;
		line-height: 36rpx;
		margin-bottom: 30rpx;
	}

	.item {
		margin: 0 auto 20rpx;
		width: 670rpx;

		background: #F7F7F7;
		border-radius: 16rpx;
		display: flex;
		padding: 20rpx 30rpx;

		.icon {
			margin-right: 20rpx;
			margin-top: 5rpx;
		}

		.title {
			font-size: 26rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #202020;
			line-height: 36rpx;
			margin-bottom: 20rpx;
		}

		.summary {
			font-size: 24rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #8D8D8D;
			line-height: 34rpx;
		}

		.checked {
			margin-left: auto;
			margin-top: 26rpx;
		}
	}
</style>